<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="录入发票信息" v-model="visible" align-center width="1000px" :z-index="2000" @close="handleClose">
    <div class="v-title mb-3">开票信息</div>
    <vxe-table ref="tableRef" :data="[form]" size="small">
      <vxe-column title="供应商" :min-width="140">
        <template #default="{ row, rowIndex }">
          <el-link type='primary'>{{ row.supplier_name }}</el-link>
        </template>
      </vxe-column>
      <vxe-column title="部门" field="department_name" :min-width="80" />
      <vxe-column title="采购单号" :min-width="140">
        <template #default="{ row, rowIndex }">
          <el-link type='primary'>{{ row.purchase_no }}</el-link>
        </template>
      </vxe-column>
      <vxe-column title="SKU" field="sku" :min-width="80" />
      <vxe-column title="开票品名" field="invoice_name" :min-width="80" />
      <vxe-column title="开票单位" field="invoice_unit" :min-width="80" />
      <vxe-column title="开票数量" field="billing_num" :min-width="80" />
      <vxe-column title="开票不含税单价" field="unit_price" min-width="100" />
      <vxe-column title="发票税率" field="tax_percent" :min-width="80" />
    </vxe-table>
    <div class="v-title flex items-center mt-5 mb-3">采购单信息 <el-button link type="primary" class="ml-auto"
        @click="add">添加</el-button></div>
    <el-form ref="formRef" :model="form.invoice" label-width="0" :disabled="isLook">
      <vxe-table ref="tableRef" :data="form.invoice" size="small" :row-config="{ rowHeight: 100 }">
        <vxe-column :min-width="120">
          <template #header>
            <span class="text-red-600">*</span>
            发票代码
          </template>
          <template #default="{ row, rowIndex }">
            <el-form-item :prop="`${rowIndex}.invoice_code`"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]" class="mb-3">
              <el-input v-model="row.invoice_code" placeholder="账号类型" class="w-full" />
            </el-form-item>
          </template>
        </vxe-column>
        <vxe-column :min-width="120">
          <template #header>
            <span class="text-red-600">*</span>
            发票号码
          </template>
          <template #default="{ row, rowIndex }">
            <el-form-item :prop="`${rowIndex}.invoice_no`"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]" class="mb-3">
              <el-input v-model="row.invoice_no" placeholder="账号类型" class="w-full" />
            </el-form-item>
          </template>
        </vxe-column>
        <vxe-column :min-width="120">
          <template #header>
            <span class="text-red-600">*</span>
            发票数量
          </template>
          <template #default="{ row, rowIndex }">
            <el-form-item :prop="`${rowIndex}.invoice_num`"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]" class="mb-3">
              <el-input-number v-model="row.invoice_num" controls-position="right" :min="0" :step="1" :precision="0"
                class="w-full" />
            </el-form-item>
          </template>
        </vxe-column>
        <vxe-column :min-width="120">
          <template #header>
            <span class="text-red-600">*</span>
            开票不含税金额
          </template>
          <template #default="{ row, rowIndex }">
            <el-form-item :prop="`${rowIndex}.invoice_num`"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]" class="mb-3">
              <el-input-number v-model="row.total_price" controls-position="right" :min="0" :step="0.01" :precision="2"
                class="w-full" />
            </el-form-item>
          </template>
        </vxe-column>
        <vxe-column :min-width="120">
          <template #header>
            <span class="text-red-600">*</span>
            发票行号
          </template>
          <template #default="{ row, rowIndex }">
            <el-form-item :prop="`${rowIndex}.invoice_line`"
              :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]" class="mb-3">
              <el-input v-model="row.invoice_line" placeholder="账号类型" class="w-full" />
            </el-form-item>
          </template>
        </vxe-column>
        <vxe-column :width="80">
          <template #default="{ row, rowIndex }">
            <el-button link type="danger" @click="form.invoice.splice(rowIndex, 1)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-form>
    <template v-if="isLook" #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
    <template v-else #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="create(2)">确 定</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="create(1)">提 交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})

// 表单处理
const formRef = ref()
const form = ref({})

// 打开弹窗
const isLook = ref(false)
const open = async (params, look) => {
  isLook.value = look
  if (!load.value) {
    load.value = true
    await 1
  }
  form.value = {
    invoice: [],
  }
  loadings = reactive({})
  visible.value = true
  formRef?.value?.resetFields()
  
  const res = await api.detail(params)
  form.value = res.data
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

const add = () => {
  form.value.invoice.push({ invoice_code: '', invoice_no: '', invoice_line: '' })
}

// 提交
const create = async (is_submit) => {
  const validator = await formRef?.value.validate()
  console.log('validator', validator)
  if (!validator) return
  loadings.submit = true
  form.value.is_submit = is_submit
  api.enterInvoice(form.value).then(res => {
    ElMessage.success('操作成功')
    emit('success')
    close()
  }).finally(() => {
    loadings.submit = false
  })
}

defineExpose({ open })
</script>